<template>
    <Modal title="出货数据" v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" width="1200px">
        <div v-loading="dataLoading">
            <el-radio-group v-model="real" @change="refreshData()">
                <el-radio :label="2">按出货时间</el-radio>
                <el-radio :label="1">按订单时间</el-radio>
            </el-radio-group>
            <el-radio-group style="margin-left: 10px;" v-model="platform" @change="refreshData()">
                <el-radio label="">全部</el-radio>
                <el-radio :label="1">Shopee</el-radio>
                <el-radio :label="2">Lazada</el-radio>
                <el-radio :label="3">Tiktok</el-radio>
            </el-radio-group>
            <el-button style="margin-left:10px;" size="small" @click="type=1;refreshData()" :type="type==1?'primary':'default'">{{$t('本周')}}</el-button>
            <el-button size="small" @click="type=2;refreshData()" :type="type==2?'primary':'default'">{{$t('本月')}}</el-button>
            <el-button size="small" @click="type=3;refreshData()" :type="type==3?'primary':'default'">{{$t('今年')}}</el-button>
            <label style="margin-left: 20px"></label>
            <el-date-picker size="small" @change="cbtime" v-model="others.btime" type="daterange" align="right" unlink-panels range-separator="" style="width: 220px" :start-placeholder="$t('开始日期')" value-format="yyyy-MM-dd" :end-placeholder="$t('结束日期')"></el-date-picker>
            <el-button size="small" @click="type=0;refreshData();" :type="type==0?'primary':'default'" :loading="dataLoading">{{$t('确定')}}</el-button>
        </div>
        <div class="highcharts-container" id="highcharts-container">
        </div>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" @click="cancel">确定</el-button>
        </div>
    </Modal>
</template>
<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
import $ from 'jquery'
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
export default {
    name: 'CStorageProductChangeChart',
    data() {
        return {
            options: {
                credits: {
                    enabled: false
                },
                chart: {
                    //type: 'line'
                    type: 'column'
                },
                title: {
                    text: '出货量'
                },
                subtitle: {
                    text: '数据来源:仓库代发'
                },
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    title: {
                        text: '数量'
                    },
                    stackLabels: { // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>';
                        //+'总量: ' + this.point.stackTotal;

                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                            style: {
                                // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                                textOutline: '1px 1px black'
                            }
                        }
                    }
                },
                series: []
            },
            type: 1,
            real: 1,
            btime: 0,
            etime: 0,
            platform: null,
            show: false,
            product: {},
            productId: null,
            dataLoading: false,
            others: {
                btime: null
            }

        };
    },
    props: [

    ],
    mounted: function() {


    },
    computed: {

    },
    methods: {
        initChart(opt) {

            this.chart = new Highcharts.Chart("highcharts-container", opt);

        },
        cbtime: function(value) {
            if (value) {
                this.btime = value[0];
                this.etime = value[1];
            } else {
                this.btime = "";
                this.etime = "";
            }
        },
        showDialog(data) {
            this.product = data;
            this.productId = data.id;
            this.show = true;
        },
        refreshData: function() {
            var me = this;
            if (!me.productId) {
                me.errorMessage("商品ID不为空！");
                return false;
            }
            me.dataLoading = true;
            me.$http.post("/stastis/storageChart.do", { platform: me.platform, real: me.real, productId: me.productId, type: me.type, btime: me.btime, etime: me.etime }).then(response => {
                me.dataLoading = false;
                if (response.status == 0) {
                    //画图标
                    const series = [];
                    const counts = [];
                    const realCounts = [];
                    const shareCounts = [];
                    const categories = [];
                    var strCount = 0;
                    var strRealCount = 0;
                    var strShareCount = 0;
                    for (var key in response.obj['obj']) {

                        categories.push(key);
                        counts.push(response.obj['obj'][key].count);
                        realCounts.push(response.obj['realObj'][key].count);
                        shareCounts.push(response.obj['shareObj'][key].count);


                        strCount += response.obj['obj'][key].count;
                        strRealCount += response.obj['realObj'][key].count;
                        strShareCount += response.obj['shareObj'][key].count;
                    }
                    series.push({ type: "column", name: "自有出货:" + strCount, data: counts });
                    series.push({ type: "column", name: "分销出货:" + strRealCount, data: realCounts });
                    series.push({ type: "column", name: "分享出货:" + strShareCount, data: shareCounts });
                    me.options.series = series;
                    me.options.xAxis = { categories: categories };
                    me.options.title.text = me.product.productName + "," + me.product.variationName + "," + me.product.skuCode;

                    me.initChart(me.options);
                }
            }, response => {
                me.dataLoading = false;
            });
        },

        showModal: function(val) {
            if (val) {
                this.refreshData();
            } else {
                this.options.series = [];
                this.initChart(this.options);
            }

        },
        cancel: function() {
            this.show = false;
            this.$emit("ok");
        }
    }
}
</script>